<template>
  <!-- 我的海报  生成海报 -->
  <el-dialog class="pick-dialog" title="我的推广海报" :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body width="500px">
    <div class="pagebox">

      <div class="haibao-box haibao2" ref="haibaoRef">
        <div class="qrcode_box">
          <div v-if="dialogVisible" class="qrcodeDom" ref="qrcode2"></div>
          <!-- <div class="kanhao">扫码看号</div> -->
        </div>

      </div>

      <div class="center" style="margin-top: 15px;">
        <el-button type="primary" @click="captureCanvas">下载海报</el-button>
      </div>
    </div>

  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import QRCode from "qrcodejs2";
// 在 Vue 组件中引入 html2canvas
import html2canvas from "html2canvas";
export default {
  computed: {
    ...mapGetters(["userInfo", "shopInfo"]),
  },
  data() {
    return {
      timer: 0,
      dialogVisible: false,
      loading: false,
      qrCOde: null, //生成商家域名二维码
      tuiguangLink: "",
    };
  },
  created() {},
  // computed: {
  //   tenantInfo() {
  //     // this.$store.getters.shopInfo
  //     // console.log("%c Line:23 🥓 this.$store.getters.shopInfo", "color:#4fff4B", this.$store.getters.shopInfo);
  //     return this.$store.getters.shopInfo;
  //   },
  // },
  methods: {
    open(tuiguangLink) {
      this.tuiguangLink = tuiguangLink;
      this.loading = false;
      this.dialogVisible = true;
      this.makeQrcode();
    },
    // modechange() {
    //   this.$nextTick(() => {
    //   const parentElement = document.getElementsByClassName("qrcodeDom");
    //   parentElement[0].innerHTML = ''
    //     this.makeQrcode();
    //   });
    // },
    //生成二维码
    async makeQrcode() {
      this.$nextTick(() => {
        if (this.qrCOde != null) {
          this.qrCOde.clear(); // 清除代码
        }
        this.qrCOde = null;
        let width = 70;
        let height = 70;

        let qrDom = this.$refs.qrcode2;
        this.qrCOde = new QRCode(qrDom, {
          text: this.tuiguangLink,
          width: width,
          height: height,
          correctLevel: QRCode.CorrectLevel.H,
        });
        // 添加二维码中间的图片
        let logo = new Image();
        logo.setAttribute("crossOrigin", "Anonymous");
        logo.src = "https://imgage.maimaihao.com/yuduhulian/logo1024x1024.jpg";
        logo.onload = () => {
          let qrImg = this.qrCOde._el.getElementsByTagName("img")[0];
          let canvas = this.qrCOde._el.getElementsByTagName("canvas")[0];
          this.qrCOde._el.title = "";
          canvas.style.display = "inline-block";
          let ctx = canvas.getContext("2d");
          // 设置logo的大小为二维码图片缩小的3.7倍，第二与第三参数代表logo在二维码的位置
          ctx.drawImage(
            logo,
            (width - width / 3.7) / 2,
            (height - height / 3.7) / 2,
            width / 3.7,
            height / 3.7
          );
          qrImg.src = canvas.toDataURL();
          qrImg.style.display = "none";
          // qrDom.removeChild(this.qrCOde._el.getElementsByTagName("img"))
          // let parentNode = this.$refs.qrcode; // 获取参照元素的父元素
          // if (parentNode.contains(this.qrCOde._el)) {
          //   parentNode.removeChild(this.qrCOde._el); // 如果已存在于其他父元素中，先移除
          // }
          // this.$refs.qrcode.appendChild(this.qrCOde._el);
        };
        //生成二维码

        // this.qrcode.makeCode(text);
      });
    },
    //生成图片
    captureCanvas() {
      // 选择你想要转换成图片的 DOM 元素
      this.loading = true;
      const element = this.$refs.haibaoRef;
      html2canvas(element, {
        allowTaint: false,
        background: "",
        // width: 800,
        // height: 1347,
        letterRendering: "",
        proxy: "",
        taintTest: "",
        timeout: 0,
        dpi: window.devicePixelRatio * 2,
        scale: 2,
        logging: true,
        useCORS: true,
      }).then((canvas) => {
        // canvas.toDataURL() 可以获取图片的 base64 编码
        const dataUrl = canvas.toDataURL();
        // 你可以将 dataUrl 设置为一个 img 标签的 src 属性，或者下载图片等
        this.loading = false;
        // 下载
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = "我的海报"; // 设置图片名称
        a.href = dataUrl; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      });
    },

    // submitForm(formName) {
    //   this.$refs[formName].validate((valid) => {
    //     if (valid) {
    //       localStorage.setItem("haibaoInfo", JSON.stringify(this.ruleForm));
    //       this.captureCanvas();
    //     } else {
    //       return false;
    //     }
    //   });
    // },

    close(formName) {
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.pagebox {

  .haibao-box {
    width: 400px;
    height: 674px;
    margin: 0 auto;
    background-image: url("https://imgage.maimaihao.com/yuduhulian/erp/static/haibao800x1347.png");
    background-size: 100% 100%;
    position: relative;
    color: #fff;
  }
  .haibao2 {
    height: 659px;
    // https://imgage.maimaihao.com/yuduhulian/erp/static/haibaobg2.png
    background-image: url("https://imgage.maimaihao.com/yuduhulian/guanwang/static/imgs/tuiguanghaibao.png");
    background-size: 100% 100%;


    .qrcode_box {
      width: 70px;
      height: 70px;
      bottom: 50px;
      right: 50px;
      background-color: #ccc;
      position: absolute;
      .qrcodeDom {
        width: 70px;
        height: 70px;
        margin: 0 auto;
      }
    }
  }
}
</style>
